<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        color: inherit;
    }


    body {
        background-color: #f4f4f4;
    }

    #app {
        width: 1226px;
        margin: 30px auto;
        overflow: hidden;
    }

    .content {
        overflow: hidden;
        clear: both;
    }

    .content .item {
        width: 230px;
        height: 350px;
        float: left;
        text-align: center;
        margin: 0 5px 10px;
        background-color: #fff;
    }

    .item img {
        width: 230px;
        height: 250px;
        margin-bottom: 10px;
    }

    .price {
        color: coral;
        margin-bottom: 10px;
    }

    .name {
        padding: 0 5px;
        text-align: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .order {
        margin-left: 5px;
        margin-right: 20px;
        float: left;
    }

    .order label {
        color: coral;
    }

    .sortSpan {
        margin-right: 20px;
    }

    .searchBar {
        margin-left: 20px;
        float: left;
        margin-bottom: 20px;
    }

    .clas {
        float: left;
        margin-right: 20px;
    }

    .clas span {
        color: coral;
    }

    .header {
        cursor: context-menu;
    }

    .interval {
        margin-bottom: 20px;
        clear: both;
    }

    .interval span {
        color: coral;
    }

    .interval input {
        width: 30px;
    }

    .page {
        margin: 0 auto;
        width: max-content;
    }
</style>

<body>
    <div id="app" class="app">
        <div class="header">
            <div class="order">
                <span class="sortSpan">
                    排序类型
                    <label><input type="radio" name="sort" value="id" v-model="sort">综合</label>
                    <label><input type="radio" name="sort" value="goodsprice" v-model="sort">价格</label>
                </span>
                <span>
                    排序方式
                    <label><input type="radio" name="order" value="asc" v-model="order">升序</label>
                    <label><input type="radio" name="order" value="desc" v-model="order">降序</label>
                </span>
            </div>
            <div class="clas">
                分类
                <span>
                    <label><input type="radio" name="type" value="" v-model="type">全部</label>
                    <label><input type="radio" name="type" value="1" v-model="type">服装</label>
                    <label><input type="radio" name="type" value="2" v-model="type">手机</label>
                    <label><input type="radio" name="type" value="3" v-model="type">箱包</label>
                    <label><input type="radio" name="type" value="4" v-model="type">美妆</label>
                </span>
            </div>
            <div>
                每页显示
                <select v-model="limit">
                    <option value="5">5</option>
                    <option value="10">10</option>
                    <option value="15">15</option>
                    <option value="20">20</option>
                    <option value="25">25</option>
                </select>
                条
            </div>
            <div class="searchBar">
                <input type="text" v-model="key">
                <a href="javascript:;">搜索</a>
            </div>
            <div class="interval">
                价格区间
                <span>
                    从<input type="text" v-model="gte">到<input type="text" v-model="lte">
                </span>
            </div>
        </div>
        <div class="content">
            <div class="item" v-for="item in list" :key="item.id">
                <a href="javascript:;" @click="gotoDetail(item.id)">
                    <img :src="item.goodsimg" alt="">
                    <p class="price">{{(item.goodsprice*1).toFixed(2)}}元</p>
                    <p class="name">{{item.goodsname}}</p>
                </a>
            </div>
        </div>
        <div class="page">
            <button @click="prev" v-if="page>1">上一页</button>
            <button v-else disabled>上一页</button>
            <span>{{page}}/{{maxpage}}</span>
            <button @click="next" v-if="page<maxpage">下一页</button>
            <button v-else disabled>下一页</button>
        </div>
    </div>
</body>
<script>

    new Vue({
        el: "#app",
        data: {
            list: [],
            sort: "id", // 排序类型
            order: "asc", //排序方式
            type: "", //分类类型
            key: "", //关键字搜索
            timer: null, //定时器
            gte: "", //开始值
            lte: "", //终止值
            limit: 10,
            page: 1,

            maxpage: 3,
        },
        async created() {
            this.search();

        },
        methods: {
            gotoDetail(id) { //点击进入详情页
                // location.href = "detail-圆形放大镜.html?id=" + id;
                // location.href = "detail.html?id=" + id;
                window.open("detail.html?id=" + id, "detail");
            },

            prev() {
                this.page--;
                this.shake(10);
            },
            next() {
                this.page++;
                this.shake(10);
            },

            async search(flag = false) {
                let params = {
                    _sort: this.sort,
                    _order: this.order,
                    q: this.key,
                    _limit: this.limit * 1,//限制每页显示4条
                    _page: this.page,//第几页
                }
                if (this.type) { // 如果分类类型有值
                    params.type = this.type;
                }
                if (this.gte) { // 如果区间开始值有值
                    params.goodsprice_gte = this.gte;
                }
                if (this.lte) { // 如果区间终止值有值
                    params.goodsprice_lte = this.lte;
                }

                let {data: list} = await axios({
                    method: "get",
                    url: "http://localhost:2345/goods",
                    params
                });
                this.list = list;

                let {data: list1} = await axios({ //请求全部的数据
                    method: "get",
                    url: "http://localhost:2345/goods",
                });
                // console.log("1:"+list.length);
                // console.log("2:"+this.limit);
                // if (!flag && list.length >= this.limit) {
                //     this.maxpage = Math.ceil(list1.length / this.limit);
                // } else {
                //     this.maxpage = Math.ceil(list.length / this.limit);

                // }

            },
            shake(time) { //防抖函数
                //这里会发生多次快速请求
                //key等于 商品 的时候会执行一次
                //key等于  商品1的时候也会执行一次 
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.search();
                }, time);
            }
        },
        watch: {
            limit() { //每页显示多少条
                this.search();
            },
            sort() { //排序方式
                this.search();
            },
            order() { //排序类型
                this.search();
            },
            type() { // 分类方式
                let flag = true;
                this.search(flag);
            },
            key() { // 搜索关键字
                this.shake(500);
            },
            gte() { //价格区间开始值
                this.shake(500);
            },
            lte() { // 价格区间终止值
                this.shake(500);
            }
        }

    })
</script>

</html>